<template>
    <div id="member-watch" @scroll="memberScroll" v-loading="loading_member">
        <div class="member-list" v-if="memberList.length>0">
            <div class="member-item" v-for="(item,index) in memberList">
                <router-link :to="'/'+item.login" class="member-item-box">
                    <div class="member-item-head">
                        <el-image :src="helper.checkImage(item.avatar_url)"></el-image>
                    </div>
                    <div class="member-item-user">
                        <div class="member-item-name">
                            {{item.name}}
                        </div>
                        <div class="member-item-account">
                            @{{item.login}}
                        </div>
                        <div class="member-item-info">
                            Watch at {{helper.friendlyTime(item.watch_at)}}
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
        <el-empty class="common-tips" :description="loading_tips" v-if="memberList.length==0"></el-empty>
    </div>
</template>
<script>
    import request from "@/lib/request";
    import helper from "@/lib/helper";
    export
        default {
            data() {
                return {
                    memberList: [],
                    loading_member: false,
                    loading_tips: "Loading data...",
                    activityList: [],
                    repoUrl: "",
                    page: 1,
                    userInfo: false,
                }
            },
            created() {
                let res = location.pathname.split("/");
                console.log(res);
                if (res.length < 3) {
                    this.$router.push('/');
                    return;
                }
                this.repoUrl = res[1] + "/" + res[2];
                this.userInfo = helper.getUserInfo();
                this.getMemberList();
            },
            methods: {
                memberScroll(e) {
                    console.log(e);
                    if (e.target.scrollTop + e.target.clientHeight + 30 > e.target.scrollHeight) {
                        if (!this.loading_member) {
                            this.page++;
                            this.getMemberList();
                        }
                    }
                },
                reloadData() {
                    this.page = 0;
                    this.getMemberList();
                },
                getMemberList() {
                    let that = this;
                    if (that.loading_member) {
                        return;
                    }
                    that.loading_member = true;
                    that.loading_tips = "Loading data...";
                    request({
                        url: "/repos/" + that.repoUrl + "/subscribers?per_page=30&page=" + that.page,
                        success(res) {
                            if (that.page == 1) {
                                that.memberList = res;
                            } else {
                                that.memberList = that.memberList.concat(res);
                            }
                            console.log(that.memberList)
                        },
                        final() {
                            that.loading_member = false;
                            if (that.memberList.length == 0) {
                                that.loading_tips = "No data...";
                            }
                        }
                    });
                },

            }
        }
</script>
<style>
    #member-watch {
        overflow: hidden;
        overflow-y: auto;
        flex-grow: 1;
        position: relative;
    }

    .member-item-box {
        margin: 20px;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        cursor: pointer;
    }

    .member-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .member-item {
        width: 25%;
        display: inline-block;
    }

    .member-item-head img {
        width: 60px;
        height: 60px;
        border: 3px solid #eee;
        border-radius: 100%;
    }

    .member-item-user {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 5px;
    }

    .member-item-name {
        font-size: 18px;
        color: #333;
        font-weight: normal;
    }

    .member-item-account {
        font-size: 14px;
        color: #aaa;
        flex-grow: 1;
    }

    .member-item-info {
        font-size: 14px;
        color: #666;
        font-weight: normal;
    }
</style>